<template>
  <div id="buyCard">
    <group class="agent_box">
      <p>代理名称:<span>{{agentMsg.nickname}}</span></p>
      <p>充值账号:<span>{{agentMsg.mobile}}</span></p>
    </group>
    <get-goods-type :goods-list="cardList" :goods-dec-list="cardDecList" ref="getGoodsType"></get-goods-type>
    <get-pay-code :pay-list="payList" ref="getPayCode"></get-pay-code>
    <x-button class="buy_btn" type="submit" style="background:#108ee9" @click.native="buyCardBtn()">立即购买</x-button>
  </div>
</template>

<script>
import { Group, XButton } from "vux";
import getGoodsType from "../../../components/common/getGoodsType";
import getPayCode from "../../../components/common/getPayCode";
export default {
  data() {
    return {
      agentMsg: {}, //代理信息
      cardList: null, //卡信息列表
      cardDecList: {}, //选中卡注释列表
      payList: ["alipay"] //购卡选项数组
    };
  },
  created() {
    this.getAgentMsg();
    this.getFirstPayCard();
  },
  components: {
    Group,
    XButton,
    getGoodsType,
    getPayCode
  },
  methods: {
    getAgentMsg() {
      this.apiService.user.userinfo().then(res => {
        this.agentMsg = res.data;
      });
    },
    getFirstPayCard() {
      this.apiService.user.firstpaycard().then(res => {
        //购卡信息显示
        this.cardList = res.data.purchasecard;
        this.cardList.forEach(c => {
          //首次购卡默认只有一个既id为1
          c.id = '1';
          this.cardDecList[c.id] = {
            carDec: `${c.paycard}张+赠送${c.givecard}张+加赠${
              c.bonuscard
            }张，总共<span>${c.sumcard}</span>张`,
            carMoney: c.money
          };
        });
        //获取支付方式
        this.payList.push(res.data.pay_code);
      });
    },
    buyCardBtn() {
      //获取子组件中的pay_code
      let payCode = this.$refs.getPayCode.pay_code;
      this.apiService.payment
        .firstagentorder({ pay_code: payCode, ordertype: "agent" }, "get")
        .then(res => {
          //订单提交成功后根据type跳转页面
          if (res.data.islocation == 1) {
            location.href = res.data.url;
          } else {
            let host = window.location.host;
            location.replace(
              `//${host}/payment?orderid=${res.data.orderid}&pay_code=${
                res.data.pay_code
              }&ordertype=agent`
            );
          }
        });
    }
  }
};
</script>
<style scoped>
.red {
  color: rgb(247, 93, 93);
}
#buyCard {
  height: 100%;
}
.agent_box p {
  width: 50%;
  margin: 0 auto;
  padding: 0.1rem 0;
  font-size: 0.3rem;
  color: rgb(100, 100, 100);
}
.agent_box p span {
  margin-left: 0.25rem;
  color: #000;
}
.buy_btn {
  width: 90%;
  margin-top: 0.4rem;
}
</style>
<style>
#buyCard .agent_box .weui-cells {
  margin: 0;
  padding: 0.35rem 0;
}
</style>
